<template>
  <div class="order-price">
    <div id="mxbOrderPrice" ref="echarts" style="width:4.68rem;height:2.70rem"></div>
  </div>
</template>

<script>
import {getOrderPrice} from 'src/api/api'
let echarts = require('echarts/lib/echarts')
// 引入柱状图组件
require('echarts/lib/chart/line')
require('echarts/lib/chart/bar')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
require('echarts/lib/component/toolbox')

export default {
  props: {
    clientHeight: {
      type: String,
      default: ''
    },
    clientWidth: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      orderPriceData: {
        title: {
          text: '订单交易金额',
          textStyle: {
            color: '#fff'
          }
        },
        color: ['#00BA3D', '#00BBE3', '#E3A500'],
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['斑马券交易(元)', '现金交易(元)', '幸福币交易(元)'],
          textStyle: {
            color: '#fff'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            mark: {
              show: true
            },
            dataView: {
              show: true,
              readOnly: false
            },
            magicType: {
              show: true,
              type: ['line', 'bar']
            },
            restore: {
              show: true
            },
            saveAsImage: {
              show: true,
              backgroundColor: '#0F1C30'
            }
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: true,
          data: [],
          axisLine: {
            show: false,
            lineStyle: {
              color: '#fff'
            }
          },
          axisTick: {
            show: false
          },
          nameTextStyle: {
            color: '#fff'
          }
        },
        yAxis: {
          type: 'value',
          name: '',
          axisLine: {
            show: false,
            lineStyle: {
              color: '#fff'
            }
          },
          axisTick: {
            show: false
          },
          nameTextStyle: {
            color: '#fff'
          }
        },
        series: [{
          name: '斑马券交易(元)',
          type: 'line',
          label: {
            normal: {
              show: true,
              position: 'top',
              textStyle: {
                color: '#fff'
              }
            }
          },
          barWidth: '20%',
          data: []
        },
        {
          name: '现金交易(元)',
          type: 'line',
          label: {
            normal: {
              show: true,
              position: 'top',
              textStyle: {
                color: '#fff'
              }
            }
          },
          data: []
        },
        {
          name: '幸福币交易(元)',
          type: 'line',
          label: {
            normal: {
              show: true,
              position: 'top',
              textStyle: {
                color: '#fff'
              }
            }
          },
          data: []
        }
        ]
      },
      orderPriceChart: null
    }
  },
  mounted() {
    this._getOrderPrice()
    this.selfAdaption()
  },
  methods: {
    _getOrderPrice() {
      this.orderPriceChart = echarts.init(document.getElementById('mxbOrderPrice'))
      this.orderPriceChart.setOption(this.orderPriceData)
      let activeX = []
      let activePrice = []
      let pricePrice = []
      let xfbScorePrice = []
      getOrderPrice().then(res => {
        if (res.status === '0') {
          for (let i = 0; i < res.result.data.length; i++) {
            let active = res.result.data[i].bmqAllPrice
            let xfbScore = res.result.data[i].xfbAllPrice
            let price = res.result.data[i].xjAllPrice
            let date = res.result.data[i].date.substr(res.result.data[i].date.length - 4).slice(0, 2) + '/' +
              res.result.data[i].date.substr(res.result.data[i].date.length - 4).slice(2)
            activeX.push(date)
            pricePrice.push(price)
            activePrice.push(active)
            xfbScorePrice.push(xfbScore)
          }
          this.orderPriceChart.setOption({
            xAxis: {
              data: activeX
            },
            series: [{
              name: '斑马券交易(元)',
              data: activePrice
            },
            {
              name: '现金交易(元)',
              data: pricePrice
            },
            {
              name: '幸福币交易(元)',
              data: xfbScorePrice
            }
            ]
          })
        }
      })
    },
    selfAdaption () {
      let _this = this
      setTimeout(() => {
        window.addEventListener('resize', function () {
          _this.orderPriceChart.resize()
        })
      }, 10)
    }
  }
}
</script>

<style>

</style>
